<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文字</title>
		<link rel="stylesheet" href="animate.css">
		<style type="text/css">
			html,
			body {
				height: 100%;
			}
			
			body {
				margin: 0;
				text-align: center;
                background-image: url(1.jpeg);
                background-size: 100% 100%;
			}
			/*1 文字*/
			
			h1 {
				margin-top: 50px;
				font-size: 40px;
				
			}
			/*2 按钮*/
			#yes,
			#no {
				font-size: 20px;
				margin: 10px;
			}
			/*3 笑脸*/
			
			#hidden {			
				display: none;
			}
			
			#hidden img {
				border-radius: 50%;
				width: 100px;
				margin-top: 30px;
			}
			
			#hidden p {
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		<!--1 文字-->
		<h1>你喜欢HTML5吗？</h1>
		<!--2 按钮-->
		<div>
			<button id="yes">yes</button>
			<button id="no">no</button>
		</div>
        <!--3 笑脸-->
		<div id="hidden">
			<img src="6.jpg" alt="" />
			<p class="animated rubberBand">You are right!</p>
		</div>
		<script type="text/javascript">
			var btn1 = document.getElementById('yes');
			var btn2 = document.getElementById('no');
			var div = document.getElementById('hidden');
			var img = document.querySelector('img');

			btn1.onclick = function() {
				div.style.display = div.style.display == 'inline-block' ? 'none' : 'inline-block';

			};

			btn2.onmouseover = function() {
				var height = document.documentElement.scrollHeight;
				var width = document.documentElement.scrollWidth;
//var height = window.screen.availHeight;
//var width = window.screen.availWidth;
				var top = Math.random() * height;
				var left = Math.random() * width;
				//				alert(top);
				btn2.style.position = 'absolute';
				btn2.style.top = top + 'px';
				btn2.style.left = left + 'px';


			}
		</script>
	</body>

</html>